import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:travel/model/hotel.dart';
import 'package:travel/screen/flutter_screenutil.dart';
import 'package:travel/utils/colors.dart';
import 'package:travel/utils/styles.dart';
import 'package:travel/utils/tools.dart';

class HotelActivityController extends GetxController {
  late ScrollController scrollController;

  RxList<HotelModel> pageList = RxList([]);

  RxBool isLoading = false.obs;

  RxBool hasNext = true.obs;

  RxInt total = 35.obs;

  @override
  void onInit() {
    scrollController = ScrollController()
      ..addListener(() {
        if (isLoading.isFalse &&
            scrollController.position.pixels >= scrollController.position.maxScrollExtent) {
          isLoading.value = true;
          loadMoreData();
        }
      });
    initData();
    super.onInit();
  }

  @override
  void onClose() {
    scrollController.dispose();
    super.onClose();
  }

  void initData() {
    pageList.add(HotelModel(
        name: '锦江之星风尚酒店(北海三里屯店)',
        address: '北海市海城区东直门外南二里庄29号1幢',
        price: 579,
        area: '海城区',
        imgUrl:
            'https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00002-713.jpg'));
    pageList.add(HotelModel(
        name: '北海万达文华酒店',
        address: '北海市银海区东直门外南二里庄29号1幢',
        price: 399,
        area: '银海区',
        imgUrl:
            'https://img1.baidu.com/it/u=2046807301,2551492904&fm=253&fmt=auto&app=138&f=JPEG?w=888&h=500'));
    pageList.add(HotelModel(
        name: '北海广渠门漫心酒店',
        address: '北海市合浦县东直门外南二里庄29号1幢',
        price: 478,
        area: '合浦县',
        imgUrl:
            'https://img1.baidu.com/it/u=1512264951,2503995626&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800'));
    pageList.add(HotelModel(
        name: '锦江之星风尚酒店(北海三里屯店)',
        address: '北海市海城区东直门外南二里庄29号1幢',
        price: 389,
        area: '海城区',
        imgUrl:
            'https://img2.baidu.com/it/u=3206337597,3928032791&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500'));
    pageList.add(HotelModel(
        name: '北海望京希尔顿欢朋酒店',
        address: '北海市海城区东直门外南二里庄29号1幢',
        price: 189,
        area: '海城区',
        imgUrl:
            'https://img2.baidu.com/it/u=874687570,4272745671&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500'));
    pageList.add(HotelModel(
        name: '全季酒店(北海天坛店)',
        address: '北海市海城区东直门外南二里庄29号1幢',
        price: 489,
        area: '海城区',
        imgUrl:
            'https://img2.baidu.com/it/u=1915459,4007195949&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500'));
  }

  Future<void> loadMoreData() {
    return Future.delayed(const Duration(seconds: 1), () {
      if (total.value > pageList.length) {
        hasNext.value = true;
        isLoading.value = false;
        initData();
        return;
      }
      hasNext.value = false;
      isLoading.value = false;
    });
  }
}

class HotelActivityView extends GetView<HotelActivityController> {
  const HotelActivityView({super.key});

  @override
  Widget build(BuildContext context) {
    return Obx(() => Scaffold(
          backgroundColor: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF7f7),
          appBar: AppBar(
            automaticallyImplyLeading: true,
            backgroundColor: Colors.white,
            leading: InkWell(
              onTap: Get.back,
              child: Icon(
                Icons.arrow_back_ios,
                color: ColorsUtils.parseColorFromHexString(ColorsUtils.color3333),
                size: 20.w,
              ),
            ),
            leadingWidth: 40.w,
            title: Text(
              '海景酒店',
              style: StylesUtils.customTextStyle(fontSize: 18.sp, color: ColorsUtils.color0000),
            ),
            actions: [
              IconButton(
                icon: Icon(Icons.share,
                    color: ColorsUtils.parseColorFromHexString(ColorsUtils.color3333)),
                onPressed: () {
                  ToolsUtils.openShare(context);
                },
              ),
            ],
          ),
          body: CustomScrollView(
            controller: controller.scrollController,
            slivers: [
              SliverToBoxAdapter(
                child: Column(
                  children: [
                    buildStack(context),
                  ],
                ),
              )
            ],
          ),
        ));
  }

  Widget buildStack(BuildContext context) {
    return Stack(
      children: [
        SizedBox(
            height: 300,
            child: Stack(
              children: [
                CachedNetworkImage(
                  imageUrl:
                      'https://cdn7.axureshop.com/demo2024/2251242/images/酒店活动专题/专题图_u1480.png',
                  height: 300,
                  width: Get.width,
                  fit: BoxFit.fill,
                ),
                Positioned(
                    top: top,
                    left: left,
                    child: Container(
                      width: 185,
                      height: 30,
                      decoration: BoxDecoration(
                          image: DecorationImage(
                              image: ToolsUtils.assetImageIcon('u1504.png'), fit: BoxFit.fill)),
                      alignment: Alignment.center,
                      child: Text(
                        '北海酒店精选爆款88折起',
                        style: StylesUtils.customTextStyle(),
                      ),
                    )),
                Positioned(
                  right: 20,
                  bottom: 80,
                  child: Container(
                      alignment: Alignment.center,
                      constraints: const BoxConstraints.expand(width: 80, height: 20),
                      decoration: BoxDecoration(
                          color: ColorsUtils.rgba(0, 0, 0, 0.349019607843137),
                          borderRadius: BorderRadius.circular(10)),
                      child: InkWell(
                          onTap: () {},
                          child: Text(
                            '活动规则 >',
                            style: StylesUtils.customTextStyle(fontSize: 12.sp),
                          ))),
                )
              ],
            )),
        Column(
          children: [
            ...controller.pageList
                .asMap()
                .map((index, row) {
                  Widget c;
                  if (index == 0) {
                    c = Padding(
                      padding: const EdgeInsets.only(top: 240),
                      child: Center(
                        child: Container(
                          height: 120,
                          width: 335,
                          decoration: BoxDecoration(
                              color: Colors.white, borderRadius: BorderRadius.circular(8)),
                          padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 15),
                          child: Row(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              ClipRRect(
                                borderRadius: BorderRadius.circular(8),
                                child: CachedNetworkImage(
                                  imageUrl: row.imgUrl,
                                  width: 90,
                                  height: 90,
                                  fit: BoxFit.fill,
                                ),
                              ),
                              Expanded(
                                  child: Container(
                                padding: const EdgeInsets.only(left: 10),
                                child: Column(
                                  children: [
                                    Container(
                                      alignment: Alignment.centerLeft,
                                      child: Text(
                                        row.name,
                                        style: StylesUtils.customTextStyle(
                                            fontSize: 15.sp,
                                            color: ColorsUtils.color3333,
                                            fontWeight: FontWeight.w700),
                                        maxLines: 1,
                                        overflow: TextOverflow.ellipsis,
                                      ),
                                    ),
                                    Expanded(
                                        child: Container(
                                      alignment: Alignment.centerLeft,
                                      child: Text(
                                        row.address,
                                        style: StylesUtils.customTextStyle(
                                            fontSize: 12.sp, color: ColorsUtils.color9999),
                                        maxLines: 1,
                                        overflow: TextOverflow.ellipsis,
                                      ),
                                    )),
                                    Container(
                                      alignment: Alignment.centerLeft,
                                      child: Text.rich(TextSpan(children: [
                                        TextSpan(
                                            text: '￥',
                                            style: StylesUtils.customTextStyle(
                                                fontSize: 13.sp, color: ColorsUtils.colorD900)),
                                        TextSpan(
                                            text: ' ${row.price} ',
                                            style: StylesUtils.customTextStyle(
                                                fontSize: 20.sp,
                                                fontWeight: FontWeight.w700,
                                                color: ColorsUtils.colorD900)),
                                        TextSpan(
                                            text: '起',
                                            style: StylesUtils.customTextStyle(
                                                fontSize: 12.sp, color: ColorsUtils.color9999))
                                      ])),
                                    )
                                  ],
                                ),
                              ))
                            ],
                          ),
                        ),
                      ),
                    );
                  } else {
                    c = Center(
                        child: Container(
                      height: 120,
                      width: 335,
                      decoration: BoxDecoration(
                          color: Colors.white, borderRadius: BorderRadius.circular(8)),
                      padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 15),
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          ClipRRect(
                            borderRadius: BorderRadius.circular(8),
                            child: CachedNetworkImage(
                              imageUrl: row.imgUrl,
                              width: 90,
                              height: 90,
                              fit: BoxFit.fill,
                            ),
                          ),
                          Expanded(
                              child: Container(
                            padding: const EdgeInsets.only(left: 10),
                            child: Column(
                              children: [
                                Container(
                                  alignment: Alignment.centerLeft,
                                  child: Text(
                                    row.name,
                                    style: StylesUtils.customTextStyle(
                                        fontSize: 15.sp,
                                        color: ColorsUtils.color3333,
                                        fontWeight: FontWeight.w700),
                                    maxLines: 1,
                                    overflow: TextOverflow.ellipsis,
                                  ),
                                ),
                                Expanded(
                                    child: Container(
                                  alignment: Alignment.centerLeft,
                                  child: Text(
                                    row.address,
                                    style: StylesUtils.customTextStyle(
                                        fontSize: 12.sp, color: ColorsUtils.color9999),
                                    maxLines: 1,
                                    overflow: TextOverflow.ellipsis,
                                  ),
                                )),
                                Container(
                                  alignment: Alignment.centerLeft,
                                  child: Text.rich(TextSpan(children: [
                                    TextSpan(
                                        text: '￥',
                                        style: StylesUtils.customTextStyle(
                                            fontSize: 13.sp, color: ColorsUtils.colorD900)),
                                    TextSpan(
                                        text: ' ${row.price} ',
                                        style: StylesUtils.customTextStyle(
                                            fontSize: 20.sp,
                                            fontWeight: FontWeight.w700,
                                            color: ColorsUtils.colorD900)),
                                    TextSpan(
                                        text: '起',
                                        style: StylesUtils.customTextStyle(
                                            fontSize: 12.sp, color: ColorsUtils.color9999))
                                  ])),
                                )
                              ],
                            ),
                          ))
                        ],
                      ),
                    ));
                  }
                  return MapEntry(index, c);
                })
                .values
                .toList(),
            renderBottom()
          ],
        ),
      ],
    );
  }

  Widget renderBottom() {
    if (controller.hasNext.isFalse) {
      return Container(
        padding: const EdgeInsets.symmetric(vertical: 15),
        alignment: Alignment.center,
        color: Colors.white,
        child: const Text(
          '已经到底',
          style: TextStyle(
            fontSize: 15,
            color: Color(0xFF333333),
          ),
        ),
      );
    }
    if (controller.isLoading.isTrue) {
      return Container(
        padding: const EdgeInsets.symmetric(vertical: 15),
        color: Colors.white,
        child: const Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '努力加载中...',
              style: TextStyle(
                fontSize: 15,
                color: Color(0xFF333333),
              ),
            ),
            Padding(padding: EdgeInsets.only(left: 10)),
            SizedBox(
              width: 20,
              height: 20,
              child: CircularProgressIndicator(strokeWidth: 3),
            ),
          ],
        ),
      );
    }
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 15),
      alignment: Alignment.center,
      color: Colors.white,
      child: const Text(
        '上拉加载更多',
        style: TextStyle(
          fontSize: 15,
          color: Color(0xFF333333),
        ),
      ),
    );
  }

  double get top {
    return (300.0 - 30.0) / 2.0;
  }

  double get left {
    return (Get.width - 185.0) / 2.0;
  }
}
